<template>
  <div>
    <div id="part_one">
      <span> 省：</span>
      <el-autocomplete class="inline-input"
                       v-model="state1"
                       :fetch-suggestions="querySearch"
                       placeholder="全部省份"
                       suffix-icon="el-icon-arrow-down"
                       @select="handleSelect"></el-autocomplete>
      <el-autocomplete class="inline-input"
                       v-model="state1"
                       :fetch-suggestions="querySearch"
                       placeholder="全部市"
                       :disabled="true"
                       suffix-icon="el-icon-arrow-down"
                       @select="handleSelect"></el-autocomplete>
      <el-autocomplete class="inline-input"
                       v-model="state1"
                       :fetch-suggestions="querySearch"
                       placeholder="全部区"
                       :disabled="true"
                       suffix-icon="el-icon-arrow-down"
                       @select="handleSelect"></el-autocomplete>
    </div>
    <div id="part_two">
        <span>按年：</span>
        <el-date-picker   style="width:150px;margin-right:100px" v-model="value3" type="year" placeholder="请选择年份">
        </el-date-picker>
        <span>按月份：</span>
        <el-date-picker   style="width:150px;" v-model="value2" type="month" placeholder="请选择月份">
        </el-date-picker>
    </div>
    <div id="part_three">
      <span>销量排序：</span>
      <el-radio v-model="radio" label="1">全部</el-radio>
      <el-radio v-model="radio" label="2">降序</el-radio>
      <el-radio v-model="radio" label="3">升序</el-radio>
    </div>
    <div>
      <el-table border
                :data="tableData"
                style="width: 100%"
                :header-cell-style="{textAlign:'center'}"
                :cell-style="{textAlign:'center'}">
        <el-table-column prop="year"
                         label="年"
                         width="180">
        </el-table-column>
        <el-table-column prop="month"
                         label="月"
                         width="180">
        </el-table-column>
        <el-table-column prop="area"
                         label="区">
        </el-table-column>
        <el-table-column prop="hy"
                         label="总活跃度"
                         width="180">
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<style scoped>
  .inline-input {
    width: 113px;
  }

  #part_one {
    margin: 30px;
  }

  #part_two {
    display: flex;
    align-items: center;
    margin: 30px 0 0 30px;
  }

  #part_three {
    margin: 30px;
  }

  .el-dropdown {
    vertical-align: top;
  }

    .el-dropdown + .el-dropdown {
      margin-left: 15px;
    }

  .el-icon-arrow-down {
    font-size: 12px;
  }
</style>
<script>
  export default {
    data() {
      return {
        radio: '1',
        tableData: [{
          year: '2016-05-02',
          month: '王小虎',
          area: '上海市普陀区金沙江路 1518 弄',
          hy: '2000000'
        }, {
          year: '2016-05-02',
          month: '王小虎',
          area: '上海市普陀区金沙江路 1518 弄',
          hy: '2000000'
        }, {
          year: '2016-05-02',
          month: '王小虎',
          area: '上海市普陀区金沙江路 1518 弄',
          hy: '2000000'
        }, {
          year: '2016-05-02',
          month: '王小虎',
          area: '上海市普陀区金沙江路 1518 弄',
          hy: '2000000'
        }],
        cities: [
          {
            value: "Beijing",
            label: "北京",
          },
          {
            value: "Shanghai",
            label: "上海",
          },
          {
            value: "Nanjing",
            label: "南京",
          },
          {
            value: "Chengdu",
            label: "成都",
          },
          {
            value: "Shenzhen",
            label: "深圳",
          },
          {
            value: "Guangzhou",
            label: "广州",
          },
        ],
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          },
          shortcuts: [
            {
              text: "今天",
              onClick(picker) {
                picker.$emit("pick", new Date());
              },
            },
            {
              text: "昨天",
              onClick(picker) {
                const date = new Date();
                date.setTime(date.getTime() - 3600 * 1000 * 24);
                picker.$emit("pick", date);
              },
            },
            {
              text: "一周前",
              onClick(picker) {
                const date = new Date();
                date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                picker.$emit("pick", date);
              },
            },
          ],
        },
        value1: "",
        value2: "",
        value: "",
      };
    },
  };
</script>
